<template>
  <img :src="url" :alt="text" :width="size" :height="size"/>
</template>

<script setup>
import {computed} from 'vue';
import FileUtils from "@/lang/commons/file-utils";
import Layers from "@/lang/layers/index";

/**
 * 文字图标
 *
 * 如果图片地址存在，则使用地址，如果不存在，则使用算法构建一个。
 *
 * 暂不考虑图片地址有问题的场景，解决这个问题要使用 onerror() 事件，可是如果算法产生错误，会产生无限递归的问题。
 */
const props = defineProps({
    // 图片地址
    src: {type: String, default: undefined}
    // 图片地址
    , text: {type: String, default: undefined}
    // 大小
    , size: {type: [Number, String], default: 128}
    // 图片地址
    , fontSize: {type: [String, Number], default: '28px'}
    // 文字宽度占比，文字过多则自动截断，保证有较好体验
    , max: {type: Number, default: 0.8}
    // 图片地址
    , fontFamily: {type: String, default: '"Source Sans Pro", sans-serif'}
    // 图片地址
    , backgroundColor: {type: String, default: undefined}

});

const url = computed(() => {
    if (Layers.isEmpty(props.src)) {
        const size = Number(props.size);
        const font = props.fontSize + ' ' + props.fontFamily;
        const max_num = Number(props.max);
        return FileUtils.createFontIcon(props.text, font, size, size, max_num, props.backgroundColor);
    } else {
        return props.src;
    }
});

</script>

<style scoped>
/* Optional: Add your component-specific styles here */
</style>